<template>
  <div class="home">
    <div class="propaganda">
      <video
        src="http://localhost:5000/1.mp4"
        autoplay="autoplay"
        loop="loop"
        muted="muted"
      ></video>
    </div>
    <div class="propaganda-explain">
      <p>
        「黑魔杖」唇膏以全新细管造型亮相，颠覆以往，磨砂外壳，极细管身，犹如一把唇间利刃，更显高级质感。质地柔滑，上唇轻润如纱，一抹打造哑而不干的纱感哑光妆效。
      </p>
      <button>立即选购</button>
    </div>

    <div class="product">
      <h1>热卖潮妆</h1>
      <div>
        <!-- 通过v-for来得到3个商品项 -->
        <div v-for="item in hp_block_pc" :key="item.id">
          <div @click="jump(item.go)">
            <img :src="item.url" />
          </div>
          <p @click="jump(item.go)">{{ item.title }}</p>
          <button @click="jump(item.go)">立即选购</button>
        </div>
      </div>
    </div>

    <div class="extension">
      <div>
        <h1>新年派对限定系列</h1>
        <div>
          <video
            src="https://www.maccosmetics.com.cn/media/export/cms/home/homePage2021/LP/HOLIDAY_2.mp4"
            autoplay="autoplay"
            loop="loop"
            muted="muted"
          ></video>
        </div>
        <p>
          M·A·C全新新年派对限定系列闪耀登场，捕捉欢愉节日灵感，诠释欢聚动人时刻。探索更多心意好礼，宠爱自己的同时馈赠挚爱！
        </p>
        <button>立即探索</button>
      </div>
    </div>

    <div class="extension">
      <!-- 使用v-for来展示 -->
      <div v-for="item in hp_block_pc2" :key="item.id">
        <h1>{{ item.title }}</h1>

        <div @click="jump(item.go)">
          <img :src="item.url" />
        </div>

        <button @click="jump(item.go)">立即探索</button>
      </div>
    </div>
    <!-- 右侧导航栏 -->
    <div class="home-list">
      <div class="my">
        <router-link to="/account/personal-data">
          <i class="el-icon-s-custom" style="color: #333;"></i
        ></router-link>
      </div>
      <div class="cart">
        <i class="el-icon-shopping-cart-full"></i>
      </div>
      <div class="go-top" @click="backTop()" v-show="tabshow">
        <i class="el-icon-arrow-up"></i>
      </div>
    </div>
  </div>
</template>

<script>
import MyAccount from './account/MyAccount.vue'

export default {
  data() {
    return {
      // 页面滚动的高度
      scrollTopNum: '',
      // 是否进行某种操作
      tabshow: false,

      hp_block_pc: [
        {
          id: 1,
          url: 'https://www.maccosmetics.com.cn/media/export/cms/home/homePage2021/hp_block_pc_1116_01.jpg',
          title: '清爽卸妆油',
          go: '/product/details/32',
        },
        {
          id: 2,
          url: 'https://www.maccosmetics.com.cn/media/export/cms/home/homePage2021/hp_block_pc_1116_02.jpg',
          title: '无瑕粉底液',
          go: '/product/details/28',
        },
        {
          id: 3,
          url: 'https://www.maccosmetics.com.cn/media/export/cms/home/homePage2021/hp_block_pc_1116_03.jpg',
          title: '小金盒',
          go: '',
        },
      ],
      hp_block_pc2: [
        {
          id: 1,
          url: 'https://www.maccosmetics.com.cn/media/export/cms/home/homePage2021/hp_block_pc_1117_04_v2.jpg',
          title: '经典唇妆',
          go: '/product/lipsticks',
        },
        {
          id: 2,
          url: 'https://www.maccosmetics.com.cn/media/export/cms/home/homePage2021/hp_block_pc_1117_05.jpg',
          title: '王牌底妆',
          go: '/product/foundation-all',
        },
        {
          id: 3,
          url: 'https://www.maccosmetics.com.cn/media/export/cms/home/homePage2021/hp_block_pc_1117_06.jpg',
          title: '晴彩眼妆',
          go: '/product/eye-makeup',
        },
        {
          id: 4,
          url: 'https://www.maccosmetics.com.cn/media/export/cms/home/homePage2021/hp_block_pc_1117_07.jpg',
          title: '大师刷具',
          go: '/product/brushes-all',
        },
      ],
    }
  },
  //方法
  methods: {
    // 返回顶部
    backTop() {
      const goToTop = () => window.scrollTo(0, 0)
      goToTop()
    },
    // 获取页面高度
    handleScroll() {
      let top =
        document.documentElement.scrollTop ||
        document.body.scrollTop ||
        window.pageYOffset
      this.scrollTopNum = top
    },
    jump(url) {
      if(url != "") {
        this.backTop();
        this.$router.push(url);
      }
    }
  },
  mounted() {
    // 添加滚动事件
    window.addEventListener('scroll', this.handleScroll, true)
  },
  // 监听滚动
  watch: {
    scrollTopNum: function () {
      if (this.scrollTopNum > 50) {
        this.tabshow = true
      } else {
        this.tabshow = false
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.home {
  background-color: #000;
}
// 右侧导航栏
.home-list {
  position: fixed;
  bottom: 5vh;
  right: 5vh;
  width: 50px;
  div {
    height: 50px;
    width: 50px;
    background-color: #fff;
    border-radius: 50%;
    text-align: center;
    padding: 10px 0;
    margin-top: 20px;
    i {
      font-size: 25px;
    }
  }
}

.propaganda {
  height: 890px;
  background-color: #aaa;

  > video {
    width: 100%;
  }
}
.propaganda-explain {
  text-align: center;

  > p {
    color: #fff;
    margin: 50px 0;
  }
  > button {
    width: 90px;
    height: 45px;
    background-color: #fff;
    border-radius: 100px;
  }
}
.product {
  width: 1440px;
  margin: 0 auto;
  padding-bottom: 50px;

  > h1 {
    text-align: center;
    font-size: 35px;
    line-height: 180px;
    color: #fff;
    font-weight: normal;
  }
  > div {
    display: flex;
    justify-content: space-between;

    > div {
      width: calc((100% - 70px) / 3);
      text-align: center;

      > div {
        // 此高度用于未使用图片时的测试，并非实际高度
        // height: 500px;
        background-color: #aaa;
        cursor: pointer;

        > img {
          width: 100%;
        }
      }
      > p {
        color: #fff;
        font-size: 24px;
        margin: 20px 0;
        cursor: pointer;
      }
      > button {
        width: 90px;
        height: 45px;
        background-color: #fff;
        border-radius: 100px;
        cursor: pointer;
      }
    }
  }
}
.extension {
  > div {
    width: 1390px;
    text-align: center;
    margin: 0 auto;
    padding-bottom: 50px;

    > h1 {
      line-height: 180px;
      font-size: 35px;
      color: #fff;
      font-weight: normal;
    }
    > div {
      // 此高度用于测试
      // height: 780px;
      background-color: #aaa;

      > img,
      > video {
        width: 100%;
      }
    }
    > p {
      color: #fff;
      margin: 45px 0 0;
    }
    > button {
      width: 90px;
      height: 45px;
      background-color: #fff;
      border-radius: 100px;
      margin-top: 40px;
    }
  }
}
</style>
